<template>
  <div>
    <!-- 标题  路由 -->
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <div class="titlea">
      2022年艺体生招生考试
    </div>
    <div class="picture">
      <div class="Artloge"><img :src="picture"></div>
    </div>
    <div class="table">
      <div class="tableResult">
        <p class="title">姓名</p>
        <p class="content">张三</p>
      </div>
      <div class="tableResult">
        <p class="title">准考证号</p>
        <p class="content">123456789</p>
      </div>
      <div class="tableResult">
        <p class="title">报考学校</p>
        <p class="content">大城县第一中学</p>
      </div>
      <div class="tableResult">
        <p class="title">报考专业</p>
        <p class="content">美术</p>
      </div>
      <div class="tableResult">
        <p class="title">总成绩</p>
        <p class="content">280</p>
      </div>
      <div class="tableResult">
        <p class="title">素描</p>
        <p class="content">100</p>
      </div>
      <div class="tableResult">
        <p class="title">水彩</p>
        <p class="content">90</p>
      </div>
      <div class="tableResult">
        <p class="title">写生</p>
        <p class="content">90</p>
      </div>
      <div class="tableResult">
        <p class="title">录取结果</p>
        <p class="content">录取</p>
      </div>
    </div>
    <div class="tips">如有疑问请联系学校招生老师，电话：18798734568</div>
  </div>
</template>

<script>
  import NavBar from '@/components/navBar.vue'

  import picture from '../../assets/CollegeRegistrationBanner.png'

  export default {
    data() {
      return {
        // 标题  路由
        title: '录取结果',
        route: '/ScoreQuery',
        picture
      }
    },
    components: {
      NavBar,
    },
  }
</script>

<style scoped>
  .titlea {
    margin-top: 11px;
    text-align: center;
    color: rgba(42, 130, 228, 1);
    font-size: 18px;
    line-height: 150%;
  }

  .Artloge {
    margin: 10px 20px 0;
  }

  .Artloge img {
    width: 100%;
    height: 150px;
  }

  .table {
    width: 89%;
    height: 322px;
    background-color: rgba(255, 255, 255, 1);
    border-top: rgba(198, 198, 198, 1) solid 1px;
    margin-left: 20px;
    margin-right: 17px;
    margin-top: 25px;
  }

  .tableResult {
    display: flex;
  }

  .tableResult p {
    margin: 0;
    flex: 1;
    border-left: rgba(198, 198, 198, 1) solid 1px;
    border-bottom: rgba(198, 198, 198, 1) solid 1px;
    height: 30px;
    display: flex;
    padding-left: 5px;
    align-items: center;
  }

  .tableResult .title {
    background-color: #f7f7f7;
  }

  .tableResult .content {
    border-right: rgba(198, 198, 198, 1) solid 1px;
  }
  .tips{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    color: rgba(80, 80, 80, 1);
    font-size: 12px;
    text-align: center;
  }

</style>
